<template>
    <div class="auth-wrap" v-title data-title="钉钉授权">
        <div class="auth-header-title">钉钉授权</div>

        <div class="auth-content">
            <div class="auth-title">工程项目填报系统</div>
            <span class="auth-notice">为了您的账户安全以及获取更多权限,请登录授权钉钉</span>
            <div class="auth-commit">
                <van-button type="info" style="width: 100%;font-size: 18px;"
                            @click="startAuth">授权</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import * as dd from 'dingtalk-jsapi';
    import {dismissLoading, showLoading, toast,nofity} from "@/utils/notify";
    export default {
        name: "authorDing",
        data(){
            return{

            }
        },
        methods:{
            startAuth(){
                this.getAuthCode()
            },
            getAuthCode(){
                let _that=this
                if (dd.env.platform !== 'notInDingTalk') { // 如果在钉钉环境中
                    dd.ready(function() {
                        // dd.ready参数为回调函数，在环境准备就绪时触发，jsapi的调用需要保证在该回调函数触发后调用，否则无效。
                        dd.runtime.permission.requestAuthCode({
                            //corpId: "dinga1c6b428351f77d8",
                            corpId:"dingb9dd72a0880a36ff35c2f4657eb6378f",
                            onSuccess: function(result) {
                                console.log("===1111==="+result.code)
                                _that.startLogin(result.code)
                            },
                            onFail : function(err) {
                                toast("授权失败,请重试"+JSON.stringify(err))
                            }
                        });
                    });
                }else {
                    toast("请在钉钉应用内使用")
                }
            },
            startLogin(authCode){
                if (!authCode){
                    toast("授权失败,请重试：code不存在")
                    return
                }
                showLoading("授权中...")
                let params = {
                    code: authCode
                }
                let callBack = (res) => {
                    localStorage.setItem("sessionId",res.sessionId)
                    localStorage.setItem("adminType",res.adminType)
                    dismissLoading()
                    nofity('授权成功')
                    setTimeout(()=>{
                        this.$router.push({
                            name:'Home'
                        })
                    },1300)
                }
                let errback=()=>{
                    dismissLoading()
                }
                this.$request('POST', "/api/mobile/auth", params, callBack,this,errback)
            }
        }
    }
</script>

<style scoped lang="scss">
    .auth-wrap {
        min-height: 100vh;
        background: $page-bg;

        .auth-header-title{
            width: 100%;
            height: $header-top;
            background: $main-color;
            color: #ffffff;
            font-size: $header-title;
            line-height: $header-top;
            text-align: center;
        }
        .auth-content{
            width: 100%;
            margin-top: 100px;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-direction: column;
            .auth-title{
                width: 100%;
                text-align: center;
                font-size: 23px;
                color: #323233;
            }
            .auth-notice{
                margin-left: 20px;
                margin-top: 30px;
                font-size: 15px;
                color: #7D8082;
            }
            .auth-commit{
                width: 100%;
                padding: 0 20px;
                box-sizing: border-box;
                height: 45px;
                margin: 50px auto 30px;
                border-radius: 45px;
                font-size: 18px;
                text-align: center;
                line-height: 45px;
                color: #ffffff;
            }
        }

    }
</style>
